<template>
  <div id="lyricList">
    <ul ref="ul" id="ul">
      <li v-for="(item,index) in lyricList" :key="index" :class="lyricIndex == index ? 'active' : ''" @click="skip(index)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "Lyric",
  methods:{
    skip(index) {
      // console.log(index)
      $('ul').children().removeClass('active')
      this.$refs.ul.children[index].className = 'active'
      this.$emit('clickLyric',{
        index:index
      })
    }
  },
  props :{
    lyricList:Array,
    scrollTop:Number,
    lyricIndex:Number
  },
  created() {

  },
  mounted() {

  },
  watch:{
    scrollTop:function (){
      this.$refs.ul.scrollTop = this.scrollTop
    }
  }
}
</script>

<style scoped lang="less">
  #lyricList {
    top: 0;
    width: 100%;
    height: calc(100vh - 46px);
    background-color: rgba(153, 44, 44, 0.5);
  >ul {
      list-style: none;
      width: 100%;
      height: 66%;
      padding: 180px 0 30px;
      overflow: auto;
      >li {
        width: 90%;
        margin: auto 5%;
        text-align: center;
        color: aqua;
        text-shadow: 3px 3px 5px;
        font-size: 18px;
        padding: 10px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      >.active {
        height: auto;
        white-space: normal;
        font-size: 22px;
        font-weight: 700;
        color: hotpink;
        text-shadow: 0px 0px 0px;
      }
    }
  }
</style>